Membuat List pada HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

HTML list adalah salah satu elemen HTML yang digunakan untuk membuat daftar atau list. Ada tiga jenis list yang dapat dibuat menggunakan elemen HTML list, yaitu:

Ordered List (Daftar Berurutan)

Ordered list digunakan untuk membuat daftar dengan nomor atau angka yang terurut. Elemen HTML untuk ordered list adalah <ol>, sedangkan untuk setiap item dalam daftar digunakan elemen <li>. Contoh:

<h2>Daftar Buah-buahan</h2>
<ol>
  <li>Apel</li>
  <li>Mangga</li>
  <li>Nanas</li>
</ol>

Kode diatas akan menghasilkan tampilan berikut:

Daftar Buah-buahan

  1. Apel
  2. Mangga
  3. Nanas

#Mengubah Type Penomoran

Untuk mengubah tipe dari ordered list di HTML kita dapat menggunakan atribut type. Atribut type untuk ordered list memungkinkan untuk menentukan tipe nomor atau angka yang digunakan dalam daftar. Tipe penomoran yang dapat digunakan yaitu:

Berikut adalah beberapa nilai yang dapat digunakan pada atribut type untuk mengubah tipe dari ordered list:

  1. type="1": Merupakan tipe default dari ordered list, yaitu menggunakan angka.
  2. type="A": Menggunakan huruf kapital sebagai nomor urut, dimulai dari huruf A.
  3. type="a": Menggunakan huruf kecil sebagai nomor urut, dimulai dari huruf a.
  4. type="I": Menggunakan angka Romawi kapital sebagai nomor urut, dimulai dari I.
  5. type="i": Menggunakan angka Romawi kecil sebagai nomor urut, dimulai dari i.

Contoh:

<h2>Daftar Buah-buahan</h2>
<ol type='A'>
  <li>Apel</li>
  <li>Mangga</li>
  <li>Nanas</li>
</ol>

Kode diatas akan menghasilkan dokumen web berikut:

Daftar Buah-buahan

  1. Apel
  2. Mangga
  3. Nanas

 

Unordered List (Daftar Tidak Berurutan)

Unordered list digunakan untuk membuat daftar dengan tanda bintang, bullet atau simbol lainnya. Elemen HTML untuk unordered list adalah <ul>, sedangkan untuk setiap item dalam daftar digunakan elemen <li>. Contoh:

<h2>Daftar Buah-buahan</h2>
<ul>
  <li>Apel</li>
  <li>Mangga</li>
  <li>Nanas</li>
</ul>

Kode diatas akan menghasilkan dokumen web berikut:

Daftar Buah-buahan

  • Apel
  • Mangga
  • Nanas

#Mengubah tipe Bulleting

Untuk mengubah tipe dari unordered list di HTML kita dapat menggunakan atribut type. Atribut type untuk unordered list memungkinkan untuk menentukan tipe simbol atau bullet yang digunakan dalam daftar.

Berikut adalah beberapa nilai yang dapat digunakan pada atribut type untuk mengubah tipe dari unordered list:

  1. type="disc": Merupakan tipe default dari unordered list, yaitu menggunakan bullet berbentuk bulat (disc).
  2. type="circle": Menggunakan bullet berbentuk lingkaran (circle).
  3. type="square": Menggunakan bullet berbentuk persegi (square).
  4. type="none": Tidak menggunakan bullet sama sekali.

Contoh kode HTML untuk mengubah tipe dari unordered list menggunakan atribut type:

<h2>Daftar Buah-buahan</h2>
<ul type='square'>
  <li>Apel</li>
  <li>Mangga</li>
  <li>Nanas</li>
</ul>

Output yang dihasilkan dari kode diatas yaitu:

Daftar Buah-buahan

  • Apel
  • Mangga
  • Nanas

 

Definition List (Daftar Definisi)

Definition list digunakan untuk membuat daftar kata kunci dengan definisi atau deskripsi yang mengikuti setiap kata kunci. Elemen HTML untuk definition list adalah <dl>, sedangkan untuk setiap kata kunci dalam daftar digunakan elemen <dt>, dan untuk setiap definisi atau deskripsi digunakan elemen <dd>. Contoh:

<dl>
  <dt>Buah-buahan</dt>
  <dd>Apel</dd>
  <dd>Mangga</dd>
  <dd>Nanas</dd>
  <dt>Sayur-sayuran</dt>
  <dd>Bayam</dd>
  <dd>Kangkung</dd>
</dl>

Kode HTML diatas akan menghasilkan dokumen web berikut:

Buah-buahan
Apel
Mangga
Nanas
Sayur-sayuran
Bayam
Kangkung